<template>
  <div>
  <div>
    <br>
    <!--搜索栏开始-->
    <el-row>
      <el-col :span="20" align="left">
        <el-form ref="searchParamsForm" :inline="true" size="small" class="demo-form-inline">
          <svg-icon icon-class="search" style="font-size: 25px;margin-left:20px;margin-top: 6px"></svg-icon>&nbsp;
          <el-form-item>
            <el-input v-model="title"  placeholder="课程名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="subjectId" style="width: 130px" placeholder="课程类别">
              <el-option v-for="(subject,index) in subjectList" :value="subject.id" :label="subject.title" :key="subject.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="enable" style="width: 130px" placeholder="课程状态">
              <el-option label="下架" :value="0"/>
              <el-option label="上架" :value="1"/>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="required" style="width: 130px" placeholder="必/选修">
              <el-option label="必修" :value="0"/>
              <el-option label="选修" :value="1"/>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" v-waves @click="btnQuery">查询</el-button>
            <el-button size="small" v-waves @click="resetSearch('searchParamsForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <!--搜索栏结束-->
    <!-- 课程列表 开始-->

    <el-row>
      <el-col :span="24" align="center">

        <div class="app-container">
          <el-table v-loading="loading"
                    class="table"
                    :data="courseList"
                    :cell-style="{ textAlign: 'center' }"
                    :header-cell-style="{textAlign:'center'}"
          >
            <el-table-column type="index"></el-table-column>
            <el-table-column prop="cover" label="封面">
              <template slot-scope="scope">
                <el-image
                  fit="cover"
                  style="width: 140px; height: 60px"
                  shape="square"
                  :src="scope.row.cover">
                </el-image>
              </template>
            </el-table-column>
            <el-table-column prop="title" label="名称"></el-table-column>
            <el-table-column prop="subjectName"  label="分类"></el-table-column>
            <el-table-column prop="lessonNum" width="70" label="总课时"></el-table-column>
            <el-table-column prop="createTime" label="上架时间"></el-table-column>
            <el-table-column prop="enable" width="100" label="状态">
              <template slot-scope="scope">
                <el-tag effect="plain" type="danger" v-waves v-if="scope.row.enable===0">下架</el-tag>
                <el-tag effect="plain" type="primary" v-waves v-if="scope.row.enable===1">上架</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right">
              <template slot-scope="scope">
                <el-button type="primary" v-waves size="mini" @click="openUpdateProfileDialog(scope.row)">修改</el-button>

                <el-popconfirm
                  style="margin-left: 10px"
                  placement="top-end"
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                  icon="el-icon-info"
                  icon-color="red"
                  :title="`你要下架[${scope.row.title}]吗？`"
                  @confirm="downAuthority(scope.$index)"
                >
                  <el-button v-if="scope.row.enable===1" slot="reference" type="danger" size="mini">下架</el-button>
                </el-popconfirm>
                <el-popconfirm
                  placement="top-end"
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                  icon="el-icon-info"
                  icon-color="red"
                  :title="`你要启用[${scope.row.title}]吗？`"
                  @confirm="upAuthority(scope.$index)"
                >
                  <el-button v-if="scope.row.enable===0" slot="reference" type="warning" size="mini">上架</el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <br>
    <el-row>
      <el-col :span="24">
        <el-pagination
          background
          align="center"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pageNum"
          :page-sizes="[7,5]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-col>
    </el-row>
    <!-- 课程列表 结束-->
  </div>
  <div>
    <!-- 修改信息 -->
    <el-dialog
      :title.sync="updateProfileDialogTitle"
      :visible.sync="updateProfileDialogVisible"
      destroy-on-close
      top="3vh"
      :close-on-click-modal="false"
    >
      <v-course-add-update ref="UpdateDialog" />
      <span slot="footer">
          <el-button type="primary" size="small" @click="updateAuthority">更 新</el-button>
          <el-button size="small" @click="updateProfileDialogVisible = false">取 消</el-button>
        </span>
    </el-dialog>
  </div>
 </div>
</template>

<script>
import axios from "axios";
export default {
  name: "course_list",
  components:{
    'v-course-add-update':()=>import('./course_add_update')
  },
  data(){
    return{
      title:'',
      subjectId:'',
      enable:'',
      required:'',
      subjectList:[],
      courseList:[],
      loading: true,
      pageNum: 1,
      pageSize: 7,
      total: 0,
      currentOperationData: null,
      currentOperationIndex:0,
      // 修改
      updateProfileDialogVisible: false,
      updateProfileDialogTitle: '',
    }
  },
  methods:{
    setIndexAndGetListData(index) {
      this.currentOperationIndex = index
      return this.courseList[this.currentOperationIndex]
    },
    btnQuery(){
      this.pageNum = 1;
      this.getCourseList();
    },
    resetSearch(formName) {
      this.$refs[formName].resetFields();
      this.title = '';
      this.subjectId = '';
      this.enable = '';
      this.required = '';
      this.getCourseList();
    },
    //分页大小改变
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.getCourseList();
    },
    //当前页数改变
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.getCourseList();
    },
    getSubjectList(){
      let jwtToken = localStorage.getItem('jwtToken');
      axios.get('/api/subject/subjectList',
        {params:{},headers:{jwtToken:jwtToken}}
      )
        .then(result=>{
          if(result.data.code===200){
            this.subjectList = result.data.data;
          }
        }).catch(e=>{
        this.$message({
          showClose: true,
          message: '服务器去火星了!',
          type: 'error',
          duration: 2000
        });
      })
    },
    getCourseList(){
      let jwtToken = localStorage.getItem('jwtToken');
      axios.get('/api/course/courseList',
        {
          params: {
            title: this.title,
            subjectId: this.subjectId,
            enable: this.enable,
            required:this.required,
            pageNum: this.pageNum,
            pageSize: this.pageSize
          },
          headers: {jwtToken: jwtToken}
        }).then(result => {
        if (result.data.code === 200) {
          this.courseList = result.data.data.courseListVoList;
          this.pageNum = result.data.data.pageNum;
          this.pageSize = result.data.data.pageSize;
          this.total = result.data.data.total;
          this.loading = false;
        }
      }).catch(e => {
        this.$message({
          showClose: true,
          message: '服务器去火星了!',
          type: 'error',
          duration: 2000
        });
      })
    },
    //下架按钮查询权限
    downAuthority(index) {
      let jwtToken = localStorage.getItem('jwtToken')
      axios.get('/api/course/showDisableAuthority', {params: {}, headers: {jwtToken: jwtToken}})
        .then(result => {
          console.log(result.data);
          if (result.data.code === 200) {
            this.disableCourse(index);
          } else {
            this.$message({
              showClose: true,
              message: result.data.msg,
              type: 'warning',
              duration: 2000
            });
          }
        }).catch(e => {
        this.$message({
          showClose: true,
          message: '服务器去火星了!',
          type: 'error',
          duration: 2000
        });
      })
    },
    //下架
    disableCourse(index){
      const course = this.setIndexAndGetListData(index);
      let jwtToken = localStorage.getItem('jwtToken');
      axios.get('/api/course/disable', {params: {id: course.id}, headers: {jwtToken: jwtToken}})
        .then(result => {
          if (result.data.code === 200) {
            if (result.data.data > 0) {
              this.$message({
                showClose: true,
                message: '下架成功！',
                type: 'success',
                duration: 2000
              });
            } else {
              this.$message({
                showClose: true,
                message: '请勿重复下架！',
                type: 'warning',
                duration: 2000
              });
            }
            this.getCourseList();
          }
        }).catch(e => {
        this.$message({
          showClose: true,
          message: '服务器去火星了!',
          type: 'error',
          duration: 2000
        });
      })
    },
    //上架按钮查询权限
    upAuthority(index) {
      let jwtToken = localStorage.getItem('jwtToken')
      axios.get('/api/course/showEnableAuthority', {params: {}, headers: {jwtToken: jwtToken}})
        .then(result => {
          console.log(result.data);
          if (result.data.code === 200) {
            this.enableCourse(index);
          } else {
            this.$message({
              showClose: true,
              message: result.data.msg,
              type: 'warning',
              duration: 2000
            });
          }
        }).catch(e => {
        this.$message({
          showClose: true,
          message: '服务器去火星了!',
          type: 'error',
          duration: 2000
        });
      })
    },
    enableCourse(index){
      const course = this.setIndexAndGetListData(index);
      let jwtToken = localStorage.getItem('jwtToken');
      axios.get('/api/course/enable', {params: {id: course.id}, headers: {jwtToken: jwtToken}})
        .then(result => {
          if (result.data.code === 200) {
            if (result.data.data > 0) {
              this.$message({
                showClose: true,
                message: '上架成功！',
                type: 'success',
                duration: 2000
              });
            } else {
              this.$message({
                showClose: true,
                message: '请勿重复上架！',
                type: 'warning',
                duration: 2000
              });
            }
            this.getCourseList();
          }
        }).catch(e => {
        this.$message({
          showClose: true,
          message: '服务器去火星了!',
          type: 'error',
          duration: 2000
        });
      })
    },
    openUpdateProfileDialog(curData) {
      this.updateProfileDialogVisible = true
      this.currentOperationData = curData
      this.updateProfileDialogTitle = `更改课程[${curData.title}]信息`
      setTimeout(function() {
        this.$refs.UpdateDialog.setData(curData)
      }.bind(this), 100)
    },
    //修改按钮查询权限
    updateAuthority(){
      let jwtToken = localStorage.getItem('jwtToken')
      axios.get('/api/course/showUpdateProfileAuthority', {params:{},headers:{jwtToken:jwtToken}})
        .then(result=>{
          console.log(result.data);
          if(result.data.code===200){
            this.updateProfile();
          }else {
            this.$message({
              showClose: true,
              message: result.data.msg,
              type: 'warning',
              duration:2000
            });
          }
        }).catch(e=>{
        this.$message({
          showClose: true,
          message: '服务器去火星了!',
          type: 'error',
          duration:2000
        });
      })
    },
    // 修改信息
    updateProfile() {
      const course = this.$refs.UpdateDialog.getData()
      let jwtToken = localStorage.getItem('jwtToken')
      axios.post('/api/course/updateProfile',course,
        {params:{},headers:{jwtToken:jwtToken}}).then(result =>{
        if(result.data.code === 200){
          this.$message({
            showClose: true,
            message: '修改成功！',
            type: 'success',
            duration:2000
          });
          this.updateProfileDialogVisible = false
        }else {
          this.$message({
            showClose: true,
            message: '修改失败！',
            type: 'warning',
            duration:2000
          });
        }
        this.getCourseList();
      }).catch(e=>{
        this.$message({
          showClose: true,
          message: '服务器去火星了!',
          type: 'error',
          duration:2000
        });
      })
    },
  },
  created() {
    this.getSubjectList();
    this.getCourseList();
  }
}
</script>

<style scoped>

</style>
